<template>
      <el-select
        v-model="seVal"
        multiple
        disabled
        filterable
        clearable
        :placeholder="`请选择`+attributeName"
        v-loadmmore="loadmore"
        class="my_elemnt_select"
        @change="deviceChange"
        :filter-method="filterMethodThrottle">
        <el-option
          v-for="item in newData"
          :label="item.label"
          :value="item.value"
          v-show="!filterVal || initOption.includes(item.value)"
          :key="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #5e80a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
</template>

<script>

    export default {
        name: "custom-select",
        props: {
            seleteOptions: {
                type: Array,
            },
            attributeName:{ //工序属性名称
                type:String,
            },
            attributeField:{//工序字段
                type:String,
            },
            organizationName:{ //组织名称
                type:String,
            },
            deviceClass:{ //设备分类
                type:Array,
            },
            nodeId:{
                type:String,
            },
            defaultVal:{//下拉框编辑时默认值
                type:Array,
            }

        },
        directives: {
            "loadmmore": {
                bind (el, binding) {
                    // 因为el-select最终会渲染成ul  li  ，所以我们要找到对应的ul元素节点，因为最底层的滚动条就是这个ul的
                    const SELECTDOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
                    // 为对应的ul绑定滚动条滚动事件
                    SELECTDOM.addEventListener('scroll', function () {
                        const condition = this.scrollHeight - this.scrollTop == this.clientHeight
                        // 判断滚动到底部
                        if (condition) {
                            // binding.value 为自定义指令绑定的值，因为绑定的是个方法，所以这里是方法调用，触发指令后执行加载数据
                            binding.value()
                        }
                    })
                }
            }
        },
        data() {
            return {
                seVal: null,
                initOption:[], // 满足筛选条件的val集合
                filterVal: '', // 搜索条件
                filterArray:[],  // 所有可展示的数据 (符合搜索条件 && newData没有的数据)
                newData: [],  // 正在展示的数据或展示过的数据
            };
        },
        created() {
        },
        computed: {
            // 防抖
            filterMethodThrottle() {
                var time = null
                return (param) => {
                    if (time) {
                        clearTimeout(time)
                    }
                    time = setTimeout(() => {
                        // 搜索方法
                        this.filterMethod(param)
                        clearTimeout(time)
                    }, 2000)
                }
            }
        },
        mounted() {
            this.filterMethodThrottle();
        },
        methods: {
            deviceSelectInit(){
                // if(this.attributeField)
                this.newData =[];//每次初始化重置
                if(this.validatenull(this.defaultVal)) {
                    this.seVal = null;//每次初始化情况选项
                }else{
                    this.seVal =this.defaultVal;//设置下拉框默认值
                }
                this.filterMethodThrottle();
            },
            filterMethod (params) {
                // 记录下搜索条件
                this.filterVal = params
                // 搜索方法
                let vals = []
                let filterArray = []
                this.seleteOptions.forEach((item, i) => {
                    if(this.validatenull(this.organizationName)) {
                        if(this.attributeField=="device" && !this.validatenull(this.deviceClass)) {
                            if(this.deviceClass.indexOf(item.deviceClass) != -1) {
                                // 有搜索条件时  查找符合条件的
                                if (params && item.label.includes(params)) {
                                    // 添加所有符合搜索条件的val值

                                    vals.push(item.value)
                                    // 寻找符合搜索条件且newData中没有出现过的数据
                                    if (!this.newData.find(fin => fin.value === item.value)) {
                                        filterArray.push(item)
                                    }
                                } else if (!params) {  // 无搜索条件时  获取所有剩余newData中没有出现过的数据
                                    if (!this.newData.find(fin => fin.value === item.value)) {
                                        filterArray.push(item)
                                    }
                                }
                            }
                        }else{
                            // 有搜索条件时  查找符合条件的
                            if (params && item.label.includes(params)) {
                                // 添加所有符合搜索条件的val值

                                vals.push(item.value)
                                // 寻找符合搜索条件且newData中没有出现过的数据
                                if (!this.newData.find(fin => fin.value === item.value)) {
                                    filterArray.push(item)
                                }
                            } else if (!params) {  // 无搜索条件时  获取所有剩余newData中没有出现过的数据
                                if (!this.newData.find(fin => fin.value === item.value)) {
                                    filterArray.push(item)
                                }
                            }
                        }
                    }else{
                        if(item.position.indexOf(this.organizationName) != -1) {
                            if(this.attributeField=="device" && !this.validatenull(this.deviceClass)) {
                                if(this.deviceClass.indexOf(item.deviceClass) != -1) {
                                    // 有搜索条件时  查找符合条件的
                                    if (params && item.label.includes(params)) {
                                        // 添加所有符合搜索条件的val值

                                        vals.push(item.value)
                                        // 寻找符合搜索条件且newData中没有出现过的数据
                                        if (!this.newData.find(fin => fin.value === item.value)) {
                                            filterArray.push(item)
                                        }
                                    } else if (!params) {  // 无搜索条件时  获取所有剩余newData中没有出现过的数据
                                        if (!this.newData.find(fin => fin.value === item.value)) {
                                            filterArray.push(item)
                                        }
                                    }
                                }
                            }else{
                                // 有搜索条件时  查找符合条件的
                                if (params && item.label.includes(params)) {
                                    // 添加所有符合搜索条件的val值

                                    vals.push(item.value)
                                    // 寻找符合搜索条件且newData中没有出现过的数据
                                    if (!this.newData.find(fin => fin.value === item.value)) {
                                        filterArray.push(item)
                                    }
                                } else if (!params) {  // 无搜索条件时  获取所有剩余newData中没有出现过的数据
                                    if (!this.newData.find(fin => fin.value === item.value)) {
                                        filterArray.push(item)
                                    }
                                }
                            }
                        }
                    }
                })

                this.initOption = [...vals]
                this.filterArray = [...filterArray]

                this.loadmore()

            },
            // 滚动加载
            loadmore () {
                const oldArray = this.filterArray  // 可展示预备数据
                const newArray = this.newData        // 展示的数据
                let pushArray = []                 // 新增的数据

                // 当加载完毕时 直接退出方法
                if (newArray.length === oldArray.length) return

                // 当剩余要加载的不足20个时  则加载全部的
                if (newArray.length + 20 > oldArray.length) {
                    pushArray = oldArray.slice(0)
                    this.filterArray.splice(0)
                } else {
                    pushArray = oldArray.slice(0,20)
                    this.filterArray.splice(0,20)
                }
                // 搜索后展示的数据
                this.newData = [...newArray, ...pushArray]
            },
            //设备工具夹具选择
            deviceChange(val){
                let that = this
                let deviceName = []
                //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
                for (let i in val) {
                    that.newData.find((item) => {
                        if (item.value === val[i]) {
                            deviceName.push(item.label)
                        }
                    })
                }
                var obj = {
                    deviceSn: val,
                    deviceName: deviceName.toString(),
                    attributeField: this.attributeField,
                    nodeId:this.nodeId
                }
                this.$emit('handleSelectData', obj);
            }
        }
    };
</script>

<style scoped>

</style>
